{% extends 'base.html' %}
{% block extra-head %}
<style type="text/css">
#main{width:100%;}
#page{float:left;width:50%;}
#mframe{width:100%;height:800px;border:1px solid #CCC;}
span{font-size:12px;color:#666;}
#right{float:right;width:44%;margin-right:3%;font-size:14px;line-height:100%;}
#header{margin-bottom:30px;}
#url{width:70%;}
#content{line-height:150%;margin-bottom:20px;border-bottom:1px solid #CCC;border-top:1px solid #CCC;}
#imgs{border-bottom:1px solid #CCC;border-top:1px solid #CCC;margin-bottom:30px;}
.ti{height:20px;font-weight:bold;padding:4px 0 0 8px}
img{
max-width:160px;max-height:160px;
border:0px;
width: expression(this.width > 160 && this.width > this.height ? 160 : auto);
height: expression(this.height > 160 ? 160 : auto);
margin:10px;
}
#detail{
border:1px solid #CCC;
font-size:12px;
overflow:auto;
}
</style>
<script type="text/javascript">
function detail(){
  $("#detail").toggle();
}
</script>

{% endblock %}

{% block content %}
<div id="main">
  <div id="page">
	<iframe id="mframe" name="mframe" src="{{url}}" ></iframe>
  </div>
  <div id="right">
	<div id="header">
	  <b>Web Content Extact V0.1 网页正文提取</b>
	  <p>功能：判断一个网页是目录页还是内容页，如果是内容页则提取网页的正文和图片。</p>
	  <form method="get" action=".">
	  <p><b>请输入网址:</b>
	  <input id="url" type="text" name="url" value="" />
	  <input type="submit" value="提交"/>
	  </p>
	  </form>
	</div>
	
	<div class="ti">网页正文<span class="tip">{{tip}}</span></div>
	<div id="content">
	  {{content}}
	</div>
	<div class="ti">正文图像</div>
	<div id="imgs">
	  {%for img in imgs%}<a href="{{img}}"><img src="{{img}}" /></a>{%endfor%}
	</div>
	<div class="ti" id="toggle"><a href="javascript:detail();">详细分析>></a></div>
	<div id="detail" style="display:none;">
	  {% autoescape off %}
	  {{detail}}
	  {% endautoescape %}
	</div>
	<span>©Copyright 晏小辉(l0he1g at gmail.com) 2010-01-06</span>
  </div>
</div>

{% endblock %}
